<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>心猜</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="js/fontSize.js"></script>
	<script type="text/javascript" src="js/layer/layer.js"></script>
	<script type="text/javascript" src="js/zepto.min.js"></script>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript" src="js/config.js"></script>
	
	<style type="text/css">
	    body{background: #f4f4f4;}
		.nav{height:.85rem;line-height: .85rem;background: #fb597b; }
		.nav li{width: 25%;float: left;text-align: center;height:.85rem;}
		.nav li span{color: #fff;font-size: .32rem;display: inline-block;height: 85%;}
		.nav li.active span{border-bottom: 2px solid #fff;}
		.list{padding: .24rem .22rem .27rem .22rem;margin-bottom: .21rem;background: #fff;}
		.list_img{width: 7.05rem;height: 3.13rem;border-radius: .10rem;display: block;margin:0 auto;}
		.img_div{position: relative;width: 7.05rem;overflow: hidden;}
		.time{width: 3.15rem;height: .49rem;line-height: .49rem;border-radius: .08rem;background: rgba(0, 0, 0, 0.52);position: absolute;right:.17rem;bottom: .20rem;color: #fff;font-size: .26rem;text-align: center;}
		.list_desc{color: #353535;font-size: .30rem;line-height: .47rem;margin:.10rem 0 .17rem 0;font-weight: bold;}
		.list_bottom img{width:.34rem;vertical-align: middle;}
		.list_bottom span{color: #939999;font-size: .26rem;margin-left: .12rem;}
		.list_bottom .zhunfa{margin-right: .60rem;}
		.icon_prises{width:.74rem;position: absolute;right: .20rem;top: .13rem;}
		.icon_prise{width:.74rem;margin-bottom: .10rem;}
		.tip{color:#ffffff;font-size: .26rem;display: inline-block;width: 4.90rem; }
		.look_tip{color:#ffffff;font-size: .26rem;float: right;vertical-align: middle;}
		.icon_right{width: .15rem;margin-left: .05rem;position: relative;top: .03rem;}
		.bottom_tip{padding:0 .15rem;background: rgba(248, 153, 52, 0.9);position: absolute;bottom: 0;left: 0;width: 100%;box-sizing: border-box;
			border-bottom-left-radius:.10rem;border-bottom-right-radius: .10rem;height: .63rem;line-height: .63rem;}
	</style>
</head>
<body>
    <div id="app">
		<ul class="nav">
		 	<li class="active"><span>推荐</span></li>
		 	<li><span>已参与</span></li>
		 	<li><span>二次元</span></li>
		 	<li><span>社会热点</span></li>
		</ul>
		<div class="content">
			<ul>
				<li class="list">
					<div class="img_div">
					   <img src="img/p_3.png" alt="" class="list_img">
                       <!-- <span class="time">竞猜时间：10.01-11.11</span> -->
	                    <div class="bottom_tip">
					        <span class="tip">恭喜你获得：参与奖</span>  
					        <div class="look_tip">
					           查看详情
					            <img src="img/p_44.png" class="icon_right" />
					        </div>
					    </div>  
					    <div class="icon_prises">
					          <!-- 参与 -->
					         <img src="img/p_22.png" class="icon_prise" />  
					         <img src="img/p_23.png" class="icon_prise" />  
					          <!-- 参与 end-->
					    </div>    
					</div>
					<div class="list_desc">2017年天猫双十一交易额竞猜</div>
					<div class="list_bottom">
				      <img  src="img/p_1.png" class="icon_img" />
				      <span class="zhunfa">2558</span> 
				      <img  src="img/p_2.png" class="icon_img" />
				      <span class="comonts">2.5w</span>       
				    </div>
				</li>
				<li class="list">
					<div class="img_div">
					   <img src="img/p_3.png" alt="" class="list_img">
                       <!-- <span class="time">竞猜时间：10.01-11.11</span> -->
	                    <div class="bottom_tip">
					        <span class="tip">恭喜你获得：参与奖</span>  
					        <div class="look_tip">
					           查看详情
					            <img src="img/p_44.png" class="icon_right" />
					        </div>
					    </div>  
					    <div class="icon_prises">
					          <!-- 参与 -->
					         <img src="img/p_22.png" class="icon_prise" />  
					         <img src="img/p_23.png" class="icon_prise" />  
					          <!-- 参与 end-->
					    </div>    
					</div>
					<div class="list_desc">2017年天猫双十一交易额竞猜</div>
					<div class="list_bottom">
				      <img  src="img/p_1.png" class="icon_img" />
				      <span class="zhunfa">2558</span> 
				      <img  src="img/p_2.png" class="icon_img" />
				      <span class="comonts">2.5w</span>       
				    </div>
				</li>
			</ul>
		</div>
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
			    list:[],
		        unionid:"owAAAwhgt4j-LJwYmtfWrhIDuO0E",
		        info:{},
		        now_mic_time:0
			},
			mounted(){
			    hideMenu();
		        this.getCount("index");
		        // this.getInfo();
		        this.getList();
			},
			methods: {
			    goDetail(id){
			        window.location.href="detail.html"
			    },
			    getCount(str){
			      ajaxFun("POST","/share_count",{
			      	  route:str
			      },function(data){
                        
			      });
			    },
			    getInfo(){
			        var that=this;
			        ajaxFun1("POST","/get_guess_info",{
				      	
			      	},function(data){
			      		var res=data;
			            if(res.code==1){
			               that.unionid=res.data.info.unionid; 
			               that.info = res.data.info; 
			               that.loginWx();
			             
			            }else{

			            }
                        
			        });
			    },
			    loginWx(){
			        var that=this;
			        ajaxFun("POST","/login_wx",{
			        	unionid:this.info.unionid,
			            openid:this.info.openid,
			            sex:this.info.sex,
			            headimgurl:this.info.headimgurl,
			            nickname:this.info.nickname
				      	
			      	},function(data){
			            var res=data;
			            if(res.code==1){
			               that.getList();
			            }else{

			            }
                        
			        });
			    },
			    getTime(time){
			        var myDate = new Date(time);
			        var u = navigator.userAgent;
			        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
			        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
			        if(isiOS){
			           var t = new Date(time.replace(/-/g,'/')).getTime();
			        }else{
			             var t = myDate.getTime();
			        }
			        return t;
			      },
			     getDay(time){
			        var day=parseInt(time/(60*60*24*1000));
			        return day;
			    },
			    getHour(time){
			      var day=parseInt(time/(60*60*24*1000));
			      var hour=parseInt((time-day*60*60*24*1000)/(1000*60*60));
			      return hour;
			    },
			    getMiute(time){
			      var day=parseInt(time/(60*60*24*1000));
			      var hour=parseInt((time-day*60*60*24*1000)/(1000*60*60));
			      var minut=parseInt((time-hour*1000*60*60-day*60*60*24*1000)/(1000*60));
			      return minut;
			    },
			    getList(){
			        var that=this;
			        ajaxFun("POST","/get_question_list",{
			        	unionid:this.unionid
				      	
			      	},function(data){
			            var res=data;
			            if(res.code==1){
			              that.now_mic_time=res.now_mic_time;
			              for (var i = 0; i < res.data.list.length; i++) {
			                  var time=that.getTime(res.data.list[i].begin_time_date);
			                  var time1=that.getTime(res.data.list[i].e_time_date);
			                  var time2=that.getTime(res.data.list[i].expire_date);
			                  if(res.now_mic_time<time){
			                     var phase=time-res.now_mic_time;
			                     res.data.list[i].str="距离开始："+that.getDay(phase)+"天"+that.getHour(phase)+"时"+that.getMiute(phase)+"分";
			                     res.data.list[i].before=1;
			                  }else if(time<res.now_mic_time&&res.now_mic_time<time1){
			                      var phase1=time1-res.now_mic_time;
			                      res.data.list[i].str="距离答题结束："+that.getDay(phase1)+"天"+that.getHour(phase1)+"时"+that.getMiute(phase1)+"分";
			                      res.data.list[i].before=0;

			                  }else if(res.now_mic_time>time1&&res.now_mic_time<time2){
			                      var phase2=time2-res.now_mic_time;
			                      res.data.list[i].before=0;
			                      res.data.list[i].str="距离活动结束："+that.getDay(phase2)+"天"+that.getHour(phase2)+"时"+that.getMiute(phase2)+"分";
			                  }else{
			                      res.data.list[i].before=0;
			                      res.data.list[i].str="竞猜时间："+res.data.list[i].begin_time_str+"-"+res.data.list[i].expire_str;
			                  }
			              } 
			              that.list=res.data.list;


			            }else{

			            }
                        
			        });
			    }


			}
		})
	</script>
</body>
</html>